<template>
	<view class="container">
		<view class="coupon-list">
			<view class="tui-coupon">
				<view class="coupon-items tui-top20" v-for="(item,index) in accoutList" :key="index">
					  <view class="coupon-items-left">
					  	<view class="coupon-top">
					  		<view class="coupon-top-title">充值金额</view>
					  		<view class="coupon-top-time">{{item.create_time}}</view>
					  	</view>
					  	<view class="coupon-con">
					  		支付流水号：{{item.out_trade_no}}
					  	</view>
					  	
					  </view>
					  <view class="coupon-items-right">
						  <view class="coupon-nums" :class="{'coupon-red':item.number>0}">
							  {{item.recharge_money}}
						  </view>
						  <view class="coupon-nums-sp" v-if="item.is_pay==1" style="color:#ffd21d">充值成功</view>
						  <view class="coupon-nums-sp" v-else style="color:#007AFF">支付失败</view>
					  </view>
				</view>
			
			</view>
			<!--加载loadding-->
			
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="grey"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f5f5f5"></tui-nomore>
		<view v-if="accoutList==''">
			<tui-no-data :fixed="false" imgUrl="/static/images/nodata/error.png">暂无数据</tui-no-data>
		</view>
		<!--加载loadding-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageIndex:1,
				loadding: false,
				pullUpOn: true,
				accoutList:'',
				scrollTop:0,
				account:"",
			}
		},
		onShow() {
			this.tui.haslogin();
			if(this.tui.isLogin()){
				this.inits();
			}
		},
		methods: {
			inits(){
				this.loadding = true
				let token = this.tui.getToken();
				let datas={
					token: token,
					limit:20,
					page:this.pageIndex,
				};
				let accoutList=this.tui.request('user','post',datas,1000,1,'','rechargeLog');
				Promise.resolve(accoutList).then((value)=>{
				   if(value.code==10000){
					    this.accoutList='';
					    if(value.data.data){
					    	this.accoutList=value.data.data;
					    }
				   }else{
				   	this.tui.toast(value.message);
				   }
				   this.loadding=false;
				})
				
			},
		},
		
		onPullDownRefresh() {
			setTimeout(() => {
				this.pullUpOn = true
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom() {
			if (!this.pullUpOn) return;
			this.loadding = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
			let token = this.tui.getToken();
			this.pageIndex=this.pageIndex+1;
			let datas={
				token: token,
				limit:20,
				page:this.pageIndex,
			};
			
			let accoutList=this.tui.request('user','post',datas,1000,1,'','rechargeLog');
			Promise.resolve(accoutList).then((value)=>{
			   if(value.code==10000){
				    this.accoutList=this.accoutList.concat(value.data.data);
			   }else{
			   	    this.tui.toast(value.message);
			   }
			})
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
	
	.container {
			padding-bottom: env(safe-area-inset-bottom);
		}
		.yui-wallet{
			position: relative;
		}
		.yui-wallet-banner{
			width:100%;
		}
		.yui-wallet-box{
			position: absolute;top:0;left:0;
			width:100%;
		}
		.yui-wallet-box-money{width:100%;margin-top: 140rpx;color:#fff;
		font-size: 36rpx;
		align-items: center;
		    flex-direction: column;
		display: flex;}
		.yui-wallet-text{
			text-align: center;
			align-items: center;
			box-sizing: border-box;
			font-size: 30rpx;
			margin-bottom:16rpx;
		}
		.yui-wallet-balance{display: flex;
		align-items: flex-end;
			}
		.yui-wallet-span{width:100%;text-align: center;color:#fff;
		font-size: 26rpx;align-items: center;
		line-height: 100rpx;
		display: flex;flex-direction:row;
		justify-content : center}
		.yui-line{width:1rpx;height:60rpx;background:rgba(255,255,255,0.2);
		margin-top:20rpx;}
		
		.yui-wallet-box-ft{border-top: 1rpx solid rgba(255,255,255,0.4);
		flex-direction: space-between;
		margin-top: 100rpx;
		display: flex;
		width:100%;}
		.yui-icon{width:60rpx;margin-right: 10rpx;}
	    .tui-tabs-fixed{
			position:relative !important;
			top:auto !important;
		}
		.yui-txt{}
		.tui-coupon{
			width: 100%;
			/* margin-top: 60rpx; */
			position: relative;
			box-sizing: border-box;
		}
		.coupon-top{
			color:#666;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}
		.coupon-top-title{
			text-align: left;
			/* padding-right: 20rpx; */
			font-size: 26rpx;
		}
		.coupon-top-time{
			color:#b3b1b1;
			font-size: 22rpx;
		}
		.coupon-list {
		
			margin: 0 25rpx;
			position: relative;
			box-sizing: border-box;
			
		}
		.tui-coupon-list {
			width: 100%;
			padding: 0 25rpx;
			position: relative;
			box-sizing: border-box;
			
		}
	     .coupon-floar{
			 position: absolute;
			 right:-100rpx;
			 top:-90rpx;
		 }
		.tui-coupon-banner {
			width: 100%;
		}
	    .coupon-con{
			background:#fff;
			font-size: 24rpx;
			color:#9fa1a1;
		}
		.coupon-nums{
			color:#828080;
			font-size: 30rpx;
		}
		.coupon-red{
			color:#ffad10
		}
		.coupon-grey{
			color:#acacac
		}
		.coupon-nums-sp{
			font-size: 24rpx;color:#b3b1b1;
			line-height: 40rpx;
		}
		.tui-coupon-item {
			border-radius: 6rpx;
			width: 100%;
		
			position: relative;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			background:#fff;
			overflow: hidden;
		}
		.coupon-items {
			border-radius: 10rpx;
			padding: 20rpx;
			width: 100%;
		
			position: relative;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			background:#fff;
			overflow: hidden;
		}
		.tui-coupon-bg {
			width: 100%;
			height: 210rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}
	
		.tui-coupon-sign {
			height: 110rpx;
			width: 110rpx;
			position: absolute;
			z-index: 9;
			top: -30rpx;
			right: 40rpx;
		}
	    .coupon-items-left {
			color:#666;
			width: 70%;
			position: relative;
			z-index: 2;
			padding-left: 20rpx;
			display: flex;
		
			justify-content: flex-end;
			flex-direction: column;
			flex-shrink: 0;
		}
		.tui-coupon-item-left {
			width: 100%;
			height: 210rpx;
			position: relative;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
		}
	
		.tui-coupon-price-box {
			position: relative;
			display: flex;
			color: #ffad10;
			align-items: flex-end;
		}
	
		.yui-wallet-price-sign {
			font-size: 30rpx;
		}
	
		.yui-wallet-price {
			font-size: 50rpx;
			line-height: 50rpx;
			font-weight: bold;
		}
	
		.tui-price-small {
			font-size: 58rpx !important;
			line-height: 56rpx !important;
		}
	
	
		.tui-coupon-intro {
			background: #F7F7F7;
			padding: 8rpx 10rpx;
			font-size: 26rpx;
			line-height: 26rpx;
			font-weight: 400;
			color: #666;
			margin-top: 18rpx;
		}
	    .coupon-items-right {
			flex: 1;
			position: relative;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 24rpx;
			flex-direction: column;
			box-sizing: border-box;
			overflow: hidden;
		}
		.tui-coupon-item-right {
			flex: 1;
			height: 210rpx;
			position: relative;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 24rpx;
			box-sizing: border-box;
			overflow: hidden;
		}
	
		.coupon-content {
			width: 82%;
			display: flex;
			font-size: 26rpx;
			flex-direction: column;
			justify-content: center;
		}
	
		.tui-coupon-title-box {
			display: flex;
			align-items: center;
		}
	
		.tui-coupon-btn {
			padding: 6rpx;
			background: #FFEBEB;
			color: #e41f19;
			font-size: 25rpx;
			line-height: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: scale(0.9);
			transform-origin: 0 center;
			border-radius: 4rpx;
			flex-shrink: 0;
		}
	
		.tui-color-grey {
			color: #888 !important;
		}
	
		.tui-bg-grey {
			background: #F0F0F0 !important;
			color: #888 !important;
		}
	
		.tui-coupon-title {
			width: 100%;
			font-size: 26rpx;
			color: #333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	
		.tui-coupon-rule {
			padding-top: 52rpx;
		}
	
		.tui-rule-box {
			display: flex;
			align-items: center;
			transform: scale(0.8);
			transform-origin: 0 100%;
		}
	
		.tui-padding-btm {
			padding-bottom: 6rpx;
		}
	
		.tui-coupon-circle {
			width: 8rpx;
			height: 8rpx;
			background: rgb(160, 160, 160);
			border-radius: 50%;
		}
	
		.tui-coupon-text {
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: 400;
			color: #666;
			padding-left: 8rpx;
			white-space: nowrap;
		}
	
		.tui-top20 {
			margin-top: 20rpx;
		}
	
		.tui-coupon-title {
			font-size: 28rpx;
			line-height: 28rpx;
		}
	
	
		.tui-coupon-radio {
			transform: scale(0.7);
			transform-origin: 100% center;
		}
	
		.tui-btn-box {
			position: absolute;
			width: 146rpx;
			height: 52rpx;
			right: 20rpx;
			bottom: 40rpx;
			z-index: 10;
		}
	
		/* #ifdef APP-PLUS || MP */
		.wx-radio-input {
			margin-right: 0 !important;
		}
	
		/* #endif */
	
		/* #ifdef H5 */
		>>>uni-radio .uni-radio-input {
			margin-right: 0 !important;
		}
	
		/* #endif */
	</style>
	
